<template>
  <div id="app" class="content"> 
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view> 
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view> 
    <!-- <router-view /> -->
  </div>
</template>
<script>
export default { 
  mounted() { 
    this.overscroll(document.querySelector(".content"));
  },
  methods: {
    overscroll(ele) {
      var startY = 0;
      // startX = 0, 
      ele.addEventListener("touchstart", function(event) {
        try {
          var touch = event.touches[0],
            // x = Number(touch.pageX),
            y = Number(touch.pageY);
          // startX = x;
          startY = y;
        } catch (e) {
          // alert(e);
        }
      });
      ele.addEventListener("touchmove", function(event) {
        var point = event.touches[0],
          eleTop = ele.scrollTop,
          eleScrollHeight = ele.scrollHeight,
          eleOffsetHeight = ele.offsetHeight,
          eleTouchBottom = eleScrollHeight - eleOffsetHeight;
        if (eleTop === 0) {
          if (point.clientY > startY) {
            event.preventDefault();
          }
        } else if (eleTop === eleTouchBottom) {
          if (point.clientY < startY) {
            event.preventDefault();
          }
        }
      });
    }
  },
  destroyed() {
    // 销毁时移除监听
    document.body.removeEventListener("touchstart", false, false);
    document.body.removeEventListener("touchmove", false, false);
  }
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
body {
  min-width: 640px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; 
}
body,html {
  background: #fff;
  width: 100%;
}
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background-color: #fff;
}
body,button,input,select,textarea {
  /* for ie */
  font: Microsoft YaHei, Arial, Verdana, Helvetica;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
  outline: none;
  border: 0;
  text-decoration: none;
}
input,textarea {
  -webkit-appearance: none;
}
html,body {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  // -webkit-overflow-scrolling: touch;
}
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
ul {
  list-style: none;
}
.clearfix {
  zoom: 1;
}
.clearfix:after {
  display: block;
  content: "";
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden;
}
.left {float: left;}
.right { float: right;}
img {vertical-align: middle;}
.marginBottom464 {margin-bottom: 4.94rem;}
.moreData {
  height: 50px;
  font-size: 18px;
  text-align: center;
  line-height: 50px;
  width: 590px;
  margin: 5px auto;
  background-color: #fff;
  display: none; /*display: inline-block;*/
}
a {
  text-decoration: none;
  color: #302f35;
  -webkit-tap-highlight-color: transparent;
}
a:hover {
  -webkit-tap-highlight-color: transparent;
}
.flex {
  display: flex;
  flex-wrap: wrap;
}
.flex-col {
  flex-direction: column;
}
.flex.h-center {
  align-items: center;
}
.flex.center {
  justify-content: center;
}
.flex.around {
  justify-content: space-around;
}
.flex.between {
  justify-content: space-between;
}
.flex-1 {
  flex: 1;
}
.flex .end {
  align-items: flex-end;
}
.clearFix {
  zoom: 1;
}
.clearFix:after {
  display: block;
  content: "";
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden;
}
.font-14 {
  font-size: 14px;
}
.font-18 {
  font-size: 18px;
}
.font-20 {
  font-size: 20px;
}
.font-22 {
  font-size: 22px;
}
.font-24 {
  font-size: 24px;
}
[class*="font-"].red {
  color: #ee3521;
}
[class*="font-"].gray {
  color: #5a5a5a;
}
.none {
  display: none;
}
.clear {
  clear: both;
}
.nav-height {
  width: 100%;
  height: 88px;
}
// 弹窗start
.van-toast,
.van-overlay {
  z-index: 99999 !important;
}
.van-dialog {
  width: 75% !important;
  z-index: 999999 !important;
}
.van-dialog__header {
  font-size: 36px !important;
  font-family: PingFangSC-Medium !important;
  font-weight: 700 !important;
  color: rgba(48, 49, 51, 1) !important;
  line-height: 50px !important;
}
.van-dialog__message--has-title,
.van-dialog__message {
  font-size: 32px !important;
  font-family: PingFangSC-Regular !important;
  font-weight: 400 !important;
  color: rgba(48, 49, 51, 1) !important;
  line-height: 48px !important;
  letter-spacing: 2px;
}
.van-dialog .van-button {
  font-weight: 700 !important;
}
.van-model {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(57, 58, 60, 0.8);
  z-index: 99999999;
  .van-picker {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .van-picker__cancel {
    color: #818181 !important;
  }
  .van-picker__confirm,
  .van-dialog__confirm,
  .van-dialog__confirm:active {
    color: #ff2525 !important ;
  }
  .van-picker__title {
    font-weight: 700;
  }
}
.van-image-preview__index{
    z-index: 999999; 
    background: rgba(0,0,0,0.1);
    padding: 5px 20px;
    border-radius: 50px;
}
.modal {
  .modal-fiter {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.8;
    background: #393a3c;
    z-index: 9999;
  }
  .modal-content {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
  }
  .modal-center {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .modal-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
.fade-enter-active,.fade-leave-active {
  transition: opacity 0s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.animated {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
}
.color303133 {
  color: #303133;
}
.colorFF2525 {
  color: #ff2525;
}
#myFiter {
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 999;
  display: none;
}
// 弹窗end
//预加载动画start
.loading {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  background-color: transparent;
  img {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -100px;
  }
}
@supports (bottom: env(safe-area-inset-bottom)) {
  .fix_iphonex {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .fix_iphonex_margin {
    margin-bottom: env(safe-area-inset-bottom);
  }
}
//预加载动画end
</style>
